<template>
  <div class="login-holder">
    <div style="width:100%;">
      <el-row>
        <el-col :span="24">
          <div class="logo">随手递</div>
        </el-col>
      </el-row>
      <br>
      <el-row>
        <el-col :span="24">
          <el-tag class="logo-desc" type="primary">商家通道</el-tag>
        </el-col>
      </el-row>
      <br><br><br>
      <el-row>
        <el-col :span="24">
          <el-form ref="registerUserForm" :model="registerUserForm" :rules="registerFormRules">
            <el-form-item prop="username">
              <el-input size="large" type="text" v-model="registerUserForm.username" placeholder="用户名">
              </el-input>
            </el-form-item>
            <el-form-item prop="email">
              <el-input size="large" type="email" v-model="registerUserForm.email" placeholder="邮箱">
              </el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input size="large" type="password" v-model="registerUserForm.password" placeholder="密码">
              </el-input>
            </el-form-item>
            <el-form-item prop="passwordCheck">
              <el-input size="large" type="password" v-model="registerUserForm.passwordCheck" placeholder="确认密码">
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-button size="large" type="primary" style="width:100%;" @click="submitForm('registerUserForm', registerCheck)">注册开店</el-button>
            </el-form-item>
            <el-form-item>
              <el-button style="float:left;" type="text" @click="gotoLogin">已有账号？前往登录</el-button>
              <el-button style="float:right;" type="text" @click="gotoHome">返回首页</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
  
<script>
import { ROUTENAME } from 'services/constConfig.js'
import registerFormRules from 'mixins/registerFormRules.js'
import userService from 'services/userService.js'
import * as notifyUtil from 'utils/notifyUtil.js'

export default {
  mixins: [registerFormRules],
  data() {
    return {
      registerUserForm: {
        username: '',
        email: '',
        password: '',
        role: 1
      }
    }
  },
  methods: {
    registerCheck() {
      userService
        .getUserByUsername(this.registerUserForm.username)
        .then(response => {
          if (
            response.data.User !== null &&
            response.data.User !== undefined &&
            response.data.User.length > 0
          ) {
            notifyUtil.showError('注册失败', '用户名已被占用')
          } else {
            this.register()
          }
        })
    },
    register() {
      let registerUser = {
        username: this.registerUserForm.username,
        password: this.registerUserForm.password,
        email: this.registerUserForm.email,
        role: this.registerUserForm.role
      }
      userService.register(registerUser).then(response => {
        if (response.data.id === null || response.data.id === undefined) {
          notifyUtil.showError('注册失败', '服务器错误')
        } else {
          notifyUtil.showInfo('注册成功', '为您跳转到登录页面')
          this.$router.push({ path: ROUTENAME.LOGIN })
        }
      })
    },
    gotoHome() {
      this.$router.push({ path: ROUTENAME.HOME })
    },
    gotoLogin() {
      this.$router.push({ path: ROUTENAME.LOGIN })
    }
  }
}
</script>
  
<style>
.logo {
  font-size: 60px;
  color: #2d8cf0;
  border: 3px solid #2d8cf0;
  border-radius: 10px;
}
.logo-desc {
  font-size: 16px;
  color: #495060;
}
.login-holder {
  position: absolute;
  width: 300px;
  height: 400px;
  margin: auto 0;
  margin-top: -200px;
  margin-left: -150px;
  top: 50%;
  left: 50%;
  /* background: red; */
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-input {
  height: 80px;
  width: 100%;
  background: red;
  /* font-size: 20px; */
  /* line-height: 40px; */
}
.login-button {
  width: 100%;
  /* font-size: 20px; */
}
</style>
  

